import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';
import { TextField, Row, Col, Button, Select, ButtonGroup } from '@folio/stripes/components';
import DatePerfectChoice from '../../util/DateCustomize/DatePerfectChoice';

class SearchForm extends Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
  }

    static propTypes = {
      handleSubmit: PropTypes.func.isRequired,
      exportExcel: PropTypes.func,
      intl:PropTypes.func,
    };

    fieldChange = () => {
      const { handleSubmit } = this.props;
      this.setState(() => {
        handleSubmit();
      });
    };

    render() {
      const {
        handleSubmit,
        intl
      } = this.props;

      return (
        <div>
          <form data-test-form-page id="form-search" onSubmit={handleSubmit}>
            <Row style={{ width: '100%' }}>
              <Col xs={2}>
                <Field
                  component={Select}
                  name="accountType"

                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                  dataOptions={[
                    {
                      id: '0',
                      value: '',
                      label: intl.formatMessage({id:"ui-party.other.please.select.account.type"}) ,
                    },
                    {
                      id: '1',
                      value: '1',
                        label: intl.formatMessage({id:"ui-party.other.please.select.account.reader"}) ,
                    },
                    {
                      id: '2',
                      value: '2',
                        label: intl.formatMessage({id:"ui-party.other.please.select.account.admin"})
                    }
                  ]}
                />
              </Col>
              <Col xs={2}>
                <Field
                  component={TextField}
                  name="userAccount"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.readerAccount' })}
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col>
              <Col xs={2}>
                <Field
                  component={TextField}
                  name="name"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.notify.log.name' })}
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col>
              <Col xs={2}>
                <Field
                  component={Select}
                  name="messageType"
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                  dataOptions={[
                    {
                      label:  intl.formatMessage({id:"ui-party.other.please.select.information.type"}) ,
                      value: ''
                    },
                    {
                        label: intl.formatMessage({id:"ui-party.other.sign.up.successfully"})  ,
                      value: '1'
                    },
                    {
                        label: intl.formatMessage({id:"ui-party.other.attend.successfully"})  ,
                      value: '2'
                    },
                    {
                        label: intl.formatMessage({id:"ui-party.other.activity.approved"})  ,
                      value: '3'
                    },
                    {
                        label: intl.formatMessage({id:"ui-party.other.activity.unapproved"})  ,
                      value: '4'
                    }
                  ]}
                />
              </Col>
              <Col xs={2}>
                <Field
                  component={Select}
                  name="notifyMode"

                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                  dataOptions={[
                    {
                      label: intl.formatMessage({id:"ui-party.other.please.select.notification.type"}) ,
                      value: ''
                    },
                    {
                        label:intl.formatMessage({id:"ui-party.messageTemplate.data.notice.textMessage"}) ,
                      value: '2'
                    },
                    {
                        label:intl.formatMessage({id:"ui-party.messageTemplate.data.notice.weixin"}) ,
                      value: '1'
                    },
                    {
                        label:intl.formatMessage({id:"ui-party.messageTemplate.data.notice.email"}) ,
                      value: '3'
                    }
                  ]}
                />
              </Col>

            </Row>
            <Row>
              <Col xs={2}>
                <Field
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.notify.log.message.sendDate' })}
                  name="sendDate"
                  component={DatePerfectChoice}
                  dateFormat="YYYY-MM-DD"
                  isClear
                />
              </Col>
              <Col xs={4}>
                <ButtonGroup>
                  <Button type="submit">
                    <FormattedMessage id="ui-party.search" />
                  </Button>
                  <Button onClick={this.props.exportExcel}>
                    <FormattedMessage id="ui-party.export" />
                  </Button>
                </ButtonGroup>
              </Col>
            </Row>
          </form>
        </div>
      );
    }
}

export default injectIntl(
  reduxForm({
    form: 'smsSearchFrom',
    navigationCheck: true,
    enableReinitialize: true
  })(SearchForm)
);
